<template>
	<view class="container">
		<view class="content">
			<view class="list" v-for="(item,index) in tgList" :key="index">
				<view class="left">
					<image :src="item.avatar" mode=""></image>
					<view class="info">
						<view>{{item.nickname}}</view>
						<view style="font-size: 24rpx;color: #999;margin-top: 10rpx	;">{{item.time}}</view>
					</view>
				</view>
				<view class="right">
					<view>累计消费：{{item.orderCount}}</view>
					<view class="red">累计收益：{{item.numberCount}}</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="status!=='nomore'" :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 15,
				tgList: [],
				status: 'loadmore',
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.tgList.length < this.limit || this.status == 'nomore') return;
			this.status = 'loading';
			this.page++
			this.getData()
		},
		methods: {
			getData() {
				this.$allApi.getTuiguangList().then(res => {
					this.tgList = res.data.list
					if (res.data.list.length < this.limit) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 20rpx;
		border-radius: 20rpx;
		background: #fff;

		.list {
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.red {
				color: #EA3D37;
			}

			.left {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.info {
					flex: 1;
					padding-left: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
		}

		.list:last-child {
			border: none;
		}
	}

	.container {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 20rpx;
	}
</style>